<template>
  <div class="makeWork">
    <div class="toolBar">
      <!-- <el-input
        v-model="searchWord"
        size="small"
        @clear="getWorkList"
        style="width: 30%"
        type="text"
        placeholder="项目名称"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
        <el-button
          @click="getWorkList"
          slot="append"
          icon="el-icon-search"
        ></el-button>
      </el-input> -->
      <!-- <el-button
        @click="showAdd = true"
        style="margin-left: 10px"
        size="small"
        type="primary"
        ><i class="el-icon-plus"></i> 填报工时</el-button
      > -->
      <el-select v-model="status" @change="getWorkList" size="small">
            <el-option
              v-for="(item, index) in statusNow"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
      </el-select>
      <el-button
        @click="deleteKind"
        style="margin-left: 10px"
        size="small"
        type="danger"
        v-if="status==false"
        ><i class="el-icon-delete"></i> 删除选中</el-button
      >
    </div>
    <div class="content">
      <el-table
        border
        stripe
        size="small"
        :highlight-current-row="true"
        :data="tableData"
        style="width: 100%"
        height="490"
        @selection-change="selectDelete"
        :row-class-name="showStatus"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="groupTypeName" label="所属群组"></el-table-column>
        <el-table-column prop="workKindName" label="工作分类" show-overflow-tooltip=""></el-table-column>
        <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip=""></el-table-column>
        <el-table-column prop="projectType" label="项目类型"></el-table-column>
        <el-table-column prop="workTime" label="填报工时"></el-table-column>
        <el-table-column prop="evaluate" label="评价" show-overflow-tooltip=""></el-table-column>
          <el-table-column prop="startLevel" label="评分"></el-table-column>
        <!-- <el-table-column
          prop="workStartTime"
          label="工作起始时间"
          show-overflow-tooltip=""
        ></el-table-column>
        <el-table-column
          prop="workEndTime"
          label="工作结束时间"
          show-overflow-tooltip=""
        ></el-table-column> -->
        <el-table-column prop="workDescribe" label="工作描述" show-overflow-tooltip=""></el-table-column>
        <el-table-column prop="makeUsername" label="确认人"></el-table-column>
        <el-table-column prop="makeStatus" label="处理状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.makeStatus != null
                ? scope.row.makeStatus
                  ? "已确认"
                  : "未通过"
                : "未确认"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="填报时间"
          show-overflow-tooltip=""
        ></el-table-column>
        <el-table-column align="center" label="操作" :width="doitWidth" fixed="right">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" size="mini" type="primary"
              ><i class="el-icon-s-check"></i
            ></el-button>
            <el-button
              @click="removeKind(scope.row.id)"
              size="mini"
              type="danger"
              v-if="status==false"
              ><i class="el-icon-delete"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          small
          background
          layout="total, prev, pager, next"
          :total="total"
          @current-change="goSize"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="工时确认处理" :visible.sync="showAdd">
      <el-form size="small">
        <el-form-item>
          <div class="workInfo">
            <div><span class="infoTitle">填报人：</span>{{ add.username }}</div>
            <div>
              <span class="infoTitle">工作分类：</span>{{ add.workKindName }}
            </div>
            <div>
              <span class="infoTitle">所属项目：</span>{{ add.projectName }}
            </div>
            <div>
              <span class="infoTitle">起止日期：</span
              >{{ add.workStartTime }} —— {{ add.workEndTime }}
            </div>
            <div>
              <span class="infoTitle">填报工时：</span>{{ add.workTime }}
            </div>
            <div>
              <span class="infoTitle">工作描述：</span>{{ add.workDescribe }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="评价">
          <el-input
            type="textarea"
            placeholder="请输入评价"
            v-model="add.evaluate"
            maxlength="500"
          ></el-input>
          <!-- <span v-if="showEvaluateWaring" style="color:red;margin-left:20px;font-size:12px;"> 请填写评价</span> -->
          <div class="start">
            <el-rate v-model="add.startLevel"></el-rate>
          </div>
        </el-form-item>
        <el-form-item class="diaBtn">
          <el-button type="primary" @click="make('pass')"
            ><i class="el-icon-check"></i> 通过</el-button
          >
          <el-button type="info" @click="make('nopass')"
            ><i class="el-icon-close"></i>不通过</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/js/workTimeApi";
export default {
  name: "MakeWork",
  data() {
    return {
      searchWord: null,
      tableData: [],
      total: 0,
      deleteIdList: [],
      showAdd: false,
      showAddProjectKind: false,
      add: {
        projectTypeId: 1,
      },
      isEditBtn: false,
      projectList: [],
      newProjectKind: null,
      pageNum: 1,
      pageSize: 10,
      projectTypeId: null,
      workKindList: [],
      powerList: [],
      status:null,
      statusNow:[
        {
        label:'未确认',
        value:null
        },
        {
        label:'已确认',
        value:true
        },
        {
        label:'未通过',
        value:false
        }
      ]
      // showEvaluateWaring:false,
    };
  },
  methods: {
    //处理
    make(type) {
    if(this.add.evaluate!=null||this.add.startLevel!=null){
      if (type == "pass") {
        //通过
        this.add.makeStatus = true;
      }
      if (type == "nopass") {
        //问通过
        this.add.makeStatus = false;
      }
      api.updateWork(this.add).then((res) => {
        if(res.status == 'success'){
            this.$message({
                type: 'success',
                message: '处理成功'
            })
            this.showAdd = false;
            this.add = {
              projectTypeId: 1,
            }
            this.getWorkList();
        }else{
            this.$message({
                type: 'error',
                message: res.message
            })
        }
      });
      }else{
        this.$message({
          type: "warning",
          message: "请输入评价后操作",
        });
        return;
      }
    },
    //展示行状态
    showStatus(row) {
      if (row.makeStatus != null && row.makeStatus) {
        return "success-row";
      }
      if (row.makeStatus != null && row.makeStatus) {
        return "warning-row";
      }
      return "";
    },
    //跳页
    goSize(currentPage) {
      this.pageNum = currentPage;
      this.getProjectList();
    },
    //查询
    getWorkList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        makeUserId: sessionStorage.getItem("userId"),
        makeStatus: this.status
      };
      api.getWorkList(param).then((res) => {
        // console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    //处理工时
    makeWork() {},
    //选择删除
    selectDelete(data) {
      let temp = [];
      data.forEach((element) => {
        temp.push(element.id);
      });
      // console.log(temp);
      this.deleteIdList = temp;
    },
    removeKind(id) {
      this.deleteIdList = [];
      this.deleteIdList.push(id);
      this.deleteKind();
    },
    //删除
    deleteKind() {
      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteWorkTask(this.deleteIdList).then((res) => {
            if (res.status == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getWorkTaskList();
              this.deleteIdList = [];
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(row) {
      this.add = row;
      // console.log(row);
      this.showAdd = true;
    },
  },
  computed:{
    doitWidth(){
      if(this.status==false){
        return 180
      }else{
        return 90
      }
    }
  },
  mounted() {
    this.getWorkList();
  },
  watch:{
    // 'add.evaluate':function(newVal){
    //   if(newVal!=''){
    //     this.showEvaluateWaring=false
    //   }
    // }
  }
};
</script>
<style lang='scss' scoped>
.makeWork {
  padding-top: 20px;
}
.toolBar {
  display: flex;
}
.content {
  margin-top: 10px;
}
.diaBtn {
  display: flex;
  justify-content: center;
}
.pagination {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}
.workInfo {
  width: 100%;
  text-align: left;
  background-color: ghostwhite;
  padding: 5px;
}
.start {
  width: 100%;
  text-align: right;
  margin-top: 10px;
}
/deep/ .el-input__inner{
  color: #999999;
}
</style>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.infoTitle {
  display: inline-block;
  color: black;
  width: 80px;
}
</style>